﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><script src="/Scripts/Bundles/JQuery/JQuery_1_11_3.js"></script>
<script src="/Scripts/Bundles/JQuery/jquery-ui.min_1_11_4.js"></script>
<link href="/Styles/Bundles/Datatables/jquery-ui_themes_smoothness_1_11_4.css" rel="stylesheet"/>
<link href="/Styles/Bundles/Datatables/dataTables.bootstrap.min_1_10_10.css" rel="stylesheet"/>
<link href="/Styles/Bundles/Datatables/responsive.bootstrap.min_2_0_0.css" rel="stylesheet"/>
<link href="/Styles/Bundles/Datatables/buttons.dataTables.min_1_1_0.css" rel="stylesheet"/>
<link href="/Styles/Bundles/Datatables/Select2_4_0_3.css" rel="stylesheet"/>
<link href="/Styles/Bundles/Datatables/jquery.dataTables.yadcf_0_8_8.css" rel="stylesheet"/>
<script src="/Scripts/Bundles/Datatables/jquery.dataTables_1_10_10.js"></script>
<script src="/Scripts/Bundles/Datatables/dataTables.bootstrap.min_1_10_10.js"></script>
<script src="/Scripts/Bundles/Datatables/dataTables.responsive.min_2_0_0.js"></script>
<script src="/Scripts/Bundles/Datatables/responsive.bootstrap.min_2_0_0.js"></script>
<script src="/Scripts/Bundles/Datatables/dataTables.select.min_1_1_0.js"></script>
<script src="/Scripts/Bundles/Datatables/dataTables.buttons.min_1_1_0.js"></script>
<script src="/Scripts/Bundles/Datatables/Select2.full_4_0_3.js"></script>
<script src="/Scripts/Bundles/Datatables/jquery.dataTables.yadcf_0_8_8.js"></script>
<link type="text/css" rel="stylesheet" href="/assets/css/bootstrap/bootstrap.min.css" /><link type="text/css" rel="stylesheet" href="/assets/css/bootstrap/bootstrap-themes.css" /><link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
    
    <script type="text/javascript" lang="javascript" src="../Scripts/GrayParrot.Core.js"></script> 
    <script type="text/javascript" lang="javascript" src="../Scripts/GrayParrot.DataTables.js"></script> 
    <script type="text/javascript" lang="javascript" src="../Scripts/GrayParrot.Modals.js"></script> 

    <script type="text/javascript" src="/assets/plugins/bootstrap/bootstrap.min.js"></script>

    <style>
        .externaly_triggered_wrapper {
            width: 600px;
            display: inline-block;
            margin-bottom: 50px;
        }

        .input-group .select2-container {
            position: relative;
            z-index: 2;
            float: left;
            width: 100%;
            margin-bottom: 0;
            display: table;
            table-layout: fixed;
        }
    </style>
</head>
<body>

    <div>

    <select id="select2">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </select>
        

              <span id="JQDTable">
<div id="selectedItemsDialog" title="Elementi Selezionati" style="display:none">
	<div id="selItemsTable">

	</div>
</div><div id="tableJQDTableContainer" style="height:100%;width:100%">

	<table id="tableJQDTable" class="table table-hover table-bordered table-condensed">
		<thead>
			<tr>
				<th>Id</th><th>FirstName</th><th>LastName</th><th>Title</th><th>Birth Date</th><th>Actions</th>
			</tr>
		</thead>
		<tbody>

		</tbody>

	</table>

</div>
</span>

        <br />

        <!-- External Filter Container for m_tableJQDTable -->
<div id="externaly_triggered_wrapper_JQDTable" class="externaly_triggered_wrapper" >
<div>
    <span>FirstName:</span>
    <span id="efc_JQDTable_1"></span>
</div>
<div>
    <span>LastName:</span>
    <span id="efc_JQDTable_2"></span>
</div>
<div>
    <span>Title:</span>
    <span id="efc_JQDTable_3"></span>
</div>
<div>
    <span>BirthDate:</span>
    <span id="efc_JQDTable_4"></span>
</div>
</div>
<div id="externaly_triggered_wrapper-controls_JQDTable">
 <div>
	 <input type="button" onclick="yadcf.exFilterExternallyTriggered(m_tableJQDTable);" value="Filter" class="some_btn general_btn">	 <input type="button" onclick="    yadcf.exResetAllFilters(m_tableJQDTable);" value="Reset" class="some_btn general_btn"> </div>
</div>
<!-- External Filter Container for m_tableJQDTable -->


    </div>


    <script>
        var m_tableJQDTable;
        var rows_selected_JQDTable = [];

        $(document).ready(function () {
            m_tableJQDTable = $('#tableJQDTable').DataTable({
                "processing": true
        , "serverSide": true
        , "searching": true
        , "autoWitdh": true
        , "scrollY": 500
        , "scrollCollapse": true
        , "lengthChange": true
        , "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
        , "paging": true
        , "pageLength": 20
        , "pagingType": "full_numbers"

                 , "ajax": {
                     "type": "POST",
                     "url": "/api/Employee/Load",
                     "data": function (data) {
                     }
                 }

                 , "columns": [
        { "data": "EmployeeId", "type": "string", "visible": false },
        { "data": "FirstName", "type": "string" },
        { "data": "LastName", "type": "string" },
        { "data": "Title", "type": "string" },
        { "data": "BirthDate", "type": "date", "dateFormat": "dd/mm/yyyyy" },
        {
            "data": null,
            "render": function (data, type, row) {
                return "<button class=\"\" onclick=\"SayHello(" + row + ")\">Prova</button> ";
            }
        }

                 ]


                 , buttons: [
        {
            text: 'Aggiungi', className: 'sAggiungi', action: function (e, dt, node, config) {
                LoadAddDialog();
            }
        },
        {
            text: 'Modifica', className: 'sModifica', action: function (e, dt, node, config) {
                LoadEditDialog();
            }
        },
        {
            text: 'Cancella', className: 'sCancella', action: function (e, dt, node, config) {
                DeleteDialog();
            }
        },
                 ]


                 , dom: 'Bflrtip',
            });

            yadcf.init(m_tableJQDTable, [
        { column_number: 1, filter_type: "text", filter_container_id: 'efc_JQDTable_1' },
        { column_number: 2, filter_type: "text", filter_container_id: 'efc_JQDTable_2' },
        { column_number: 3, filter_type: "text", filter_container_id: 'efc_JQDTable_3' },
        { column_number: 4, filter_type: "date", date_format: '', filter_container_id: 'efc_JQDTable_4' },
            ], { externally_triggered: true });


            $('#tableJQDTable tbody').on('click', 'tr', function () {
                if ($(this).hasClass('active')) {
                    $(this).removeClass('active');
                }
                else {
                    m_tableJQDTable.$('tr.active').removeClass('active');
                    $(this).addClass('active');
                }
            });





        });
</script>


</body>

    <script>
        $(document).ready(function () {

            //YacfBootstrapTweaks();

            //$('#externaly_triggered_wrapper_JQDTable').addClass('externaly_triggered_wrapper');

            // BOOTSTRAP: Tweaks
            $('.yadcf-filter-wrapper').addClass('input-group');
            $('.yadcf-filter, .yadcf-filter-date', this).addClass('form-control input-sm');
            $('.yadcf-filter-reset-button', this).addClass('btn btn-default btn-sm').wrap('<span class="input-group-btn"></span>');


            $('#select2').select2({
                minimumResultsForSearch: 2, //Infinity,
                width: 300,
                //id: 'value',
                //formatSelection: function (item) { { alert('1'); return item.name; } },
                //formatResult: function (item) {{ return item.name; }},
                ajax: {
                    url: "/api/Customers/LoadCompanies",
                    dataType: 'json',
                    type: "POST",
                    params: { contentType: 'application/json; charset=utf-8' },
                    data: function (params) {
                        //params.page = params.page || 1;

                        return {
                            searchTerm: params.term
                            //,pageSize: 30
                            //,pageNumber: params.page
                        };

                    },
                    processResults: function (data, params) {
                        //params.page = params.page || 1;

                        return {
                            results: $.map(data.Results, function (item) {

                                var obj = {
                                    text: item.name,
                                    id: item.value
                                };

                                return obj;
                            })
                            //,pagination: {
                            //    more: (params.page * 30) < data.Total
                            //}
                        };
                    }
                }
            });
        });

        function LoadData() {
            $.ajax({
                type: 'POST',
                url: '/api/Customers/LoadCompanies',
                //data: JSON.stringify(dataJSON),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    alert(response);
                }
            });
        }

        function SayHello(obj) {

            var row = GetSelectedData(m_tableJQDTable);

            var data = m_tableJQDTable.row($(this).parents('tr')).data();

            alert(data.FirstName);

        }
    </script>
</html>

